<template>
  <div class="tabs-view-container">
    <div class="tabs-wrapper">
      <div class="tabs-scroll">
        <el-tag
          v-for="tab in tabs"
          :key="tab.path"
          :class="{ 'active-tab': activeTabPath === tab.path }"
          :closable="tab.closable"
          @click="handleTabClick(tab.path)"
          @close.stop="handleTabRemove(tab.path)"
          :effect="activeTabPath === tab.path ? 'dark' : 'plain'"
          :type="activeTabPath === tab.path ? 'primary' : null"
          class="tab-item"
        >
          {{ tab.title }}
        </el-tag>
      </div>
    </div>
    
    <div class="tabs-actions">
      <el-dropdown @command="handleCommand" trigger="click">
        <el-button size="small" type="primary" plain class="tabs-action-button">
          标签操作
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="refresh" icon="Refresh">
              刷新当前标签
            </el-dropdown-item>
            <el-dropdown-item command="closeOther" icon="CircleClose" :disabled="tabs.length <= 1">
              关闭其他标签
            </el-dropdown-item>
            <el-dropdown-item command="closeAll" icon="CloseBold" :disabled="!hasClosableTabs">
              关闭所有标签
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useTabsStore } from '@/stores/tabs'

const router = useRouter()
const tabsStore = useTabsStore()

// 标签页列表
const tabs = computed(() => tabsStore.tabs)

// 当前激活的标签页路径
const activeTabPath = computed({
  get: () => tabsStore.activeTab,
  set: (value) => {
    tabsStore.updateActiveTab(value)
    router.push(value)
  }
})

// 是否存在可关闭的标签页
const hasClosableTabs = computed(() => {
  return tabs.value.some(tab => tab.closable)
})

// 处理标签点击
const handleTabClick = (path) => {
  if (path === router.currentRoute.value.path) {
    // 如果点击的是当前标签，只刷新数据，不重新加载页面
    tabsStore.setRefreshingTab(path)
    nextTick(() => {
      tabsStore.setRefreshingTab('')
    })
  } else {
    router.push(path)
  }
}

// 处理标签关闭
const handleTabRemove = (targetPath) => {
  tabsStore.closeTab(targetPath)
  router.push(tabsStore.activeTab)
}

// 处理下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case 'refresh':
      // 刷新当前页面，只刷新数据
      const currentPath = router.currentRoute.value.path
      tabsStore.setRefreshingTab(currentPath)
      nextTick(() => {
        tabsStore.setRefreshingTab('')
      })
      break
    case 'closeOther':
      // 关闭其他标签页
      tabsStore.closeOtherTabs(activeTabPath.value)
      break
    case 'closeAll':
      // 关闭所有标签页
      tabsStore.closeAllTabs()
      router.push('/')
      break
  }
}
</script>

<style lang="scss" scoped>
.tabs-view-container {
  position: relative;
  height: 40px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  margin-bottom: 0; /* 确保不会影响下方内容的间距 */
  
  .tabs-wrapper {
    flex: 1;
    overflow: hidden;
    
    .tabs-scroll {
      display: flex;
      align-items: center;
      height: 100%;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
      
      &::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
      }
      
      .tab-item {
        margin-right: 8px;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        padding: 0 15px;
        font-size: 13px;
        border-radius: 4px;
        transition: all 0.3s;
        
        &.active-tab {
          font-weight: 600;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
          
          &.el-tag--dark {
            background-color: rgba(64, 158, 255, 0.7) !important;
            border-color: rgba(64, 158, 255, 0.7) !important;
          }
        }
        
        &:hover:not(.active-tab) {
          color: var(--el-color-primary);
          background-color: var(--el-color-primary-light-9);
        }
      }
    }
  }
  
  .tabs-actions {
    margin-left: 10px;
    
    .tabs-action-button {
      border-radius: 4px;
      font-size: 13px;
      height: 30px;
      padding: 0 12px;
    }
  }
}
</style> 